<template>
  <view class="container">
    <view class="orderinfo">
      <view style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 36rpx; color: #222222">订单自动取消</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 时间 -->
      <view class="flex" style="margin-top: 36rpx">
        <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ obj.starttime }}</text>
      </view>
      <!-- 起点 -->
      <view class="flex" style="margin-top: 28rpx; margin-bottom: 42rpx">
        <image src="../../static/mine/start.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">{{ obj.starting }}</text>
      </view>
      <!-- 终点 -->
      <view class="flex" style="margin-bottom: 28rpx">
        <image src="../../static/mine/end.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">
          {{ obj.end }}
        </text>
      </view>
    </view>

    <!-- 付款金额 -->
    <view style="text-align: center; margin-top: 44rpx" @click="gomoneydetail">
      <text style="font-weight: 500; font-size: 26rpx; color: #222222">实付金额</text>
      <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">{{ obj.actual_money }}</text>
      <text style="font-weight: 500; font-size: 26rpx; color: #ec0000">元</text>
      <uni-icons type="right" size="10"></uni-icons>
    </view>
    <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #666666">金额已原路返回</view>
    <!-- 用户取消订单 -->
    <view class="cancelorder">
      <view style="font-weight: bold; font-size: 30rpx; color: #222222">用户取消/司机取消</view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin-top: 34rpx; margin-bottom: 30rpx">
        <view>取消时间</view>
        <view>{{ obj.canceltime }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      rateValue: 0,
      orderid: '',
      obj: {},
      imgurl: ''
    };
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getdetail();
    this.imgurl = this.img;
  },
  methods: {
    // 获取订单详情
    getdetail() {
      this.http('/order/details', {
        order_id: this.orderid
      }).then((res) => {
        console.log(res);
        this.obj = res.data;
        this.obj.starttime = dayjs(this.obj.createtime * 1000).format('YYYY-MM-DD HH:mm');
        this.obj.canceltime = dayjs(res.time * 1000).format('YYYY-MM-DD HH:mm');
      });
    },
    // 跳转到计费详情
    gomoneydetail() {
      uni.navigateTo({
        url: '/pages/moneydetail/moneydetail'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep .uni-rate {
//   justify-content: center !important;
// }
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.container {
  box-sizing: border-box;

  .orderinfo {
    box-sizing: border-box;
    width: 702rpx;
    height: 364rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 34rpx 24rpx 20rpx 34rpx;
    padding: 45rpx 20rpx;
  }
  .driverinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 174rpx;
    background: #eff6ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx 24rpx;
    padding: 37rpx 20rpx;
    .iofo {
    }
  }
  .cancelorder {
    box-sizing: border-box;
    width: 702rpx;
    height: 268rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 42rpx 24rpx 0 24rpx;
    padding: 36rpx 26rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
